<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./libs/vue3.js"></script>
    <style>
        .home {
            background-color: lightgreen;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 调用全局组件home -->
        <!-- vue-3.x中, 默认会将组件调用标签上的事件, 作为原生事件, 自动注册给组件视图的根元素 -->
        <!-- 
            如果开发者希望组件调用标签上的事件, 被作为自定义事件来处理
            解决方案:在组件的配置对象中添加emits的属性节点, 将该事件声明为自定义事件(自定义事件必须通过$emit()方法来触发)
        -->
        <home @click="handler" />
    </div>
</body>
<script>
    const app = Vue.createApp({
        methods: {
            handler() {
                console.log('home组件被点击了');
            }
        }
    });
    // 注册全局组件home
    app.component('home', {
        // 将home组件调用标签上的click事件作为自定义事件来处理
        emits:['click'],
        template: `
            <div class="home" @click="$emit('click')">
                <h1>{{title}}</h1>    
            </div>
        `,
        data() {
            return {
                title: 'home组件'
            }
        }
    });

    app.mount('#app');
</script>

</html>